<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <title>{{ page.title }} - {{ site.data.project.title }}</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway|Varela+Round" rel="stylesheet"/>
    {% if site.data.project.description %}
    <meta name="description" content="{{ site.data.project.description }}">
    {% endif %}
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
    <link rel="stylesheet" href="{{ site.data.manifest['docs.css'] }}"/>
    <link rel="stylesheet" href="/static/prism.css"/>
    <!--<base href="//eventsauce.io/">-->
</head>
<body class="min-h-screen min-w-full leading-normal bg-white leading-normal">
<div class="h-16 z-10 top-0 w-screen bg-white border-grey-light border-b shadow">
    <div class="px-4 py-2">
        <div class="flex items-center flex-no-shrink pt-1">
            <a href="/" class="flex items-center">
                <img class="fill-current h-10 w-10 mr-2" width="30" height="30" src="/static/logo.svg"/>
                <span class="pr-2 font-normal font-heading leading-none text-3xl text-grey-darkest hidden sm:block">
                    Event<span class="text-red">Sauce</span><sup class="text-xs relative text-grey-dark" style="top: -20px;">{{ site.data.project.version }}</sup>
                </span>
            </a>
            <div class="flex-grow"></div>
            <div class="flex-no-grow h-10 px-4 relative">
                <input id="global-search" class="focus:outline-0 h-10 py-2 pl-8 pr-2 rounded border border-grey-lightest focus:border-grey-light bg-grey-lightest focus:bg-white focus:placeholder-white max-w-xs w-full appearance-none" type="text" placeholder="Search the docs" />
                <span class="pointer-events-none absolute inset-y-0 left-0 pl-6 flex items-center">
                    <svg class="fill-current pointer-events-none text-grey w-4 h-4 border-transparent border" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.9 14.32a8 8 0 1 1 1.41-1.41l5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12z"/></svg>
                </span>
            </div>
            <a href="#" id="menu-toggle" class="block lg:hidden h-8 w-8 border p-1 border-transparent text-grey hover:text-grey menu-closed">
                <svg class="menu-closed:shown fill-current h-full w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/>
                </svg>
                <svg class="menu-closed:hidden fill-current h-full w-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                    <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z"/>
                </svg>
            </a>
        </div>
    </div>
</div>

<main class="lg:flex">
    <nav id="main-navigation" class="lg:w-auto p-4 w-fullfixed lg:relative flex-no-shrink min-h-screen hidden lg:block bg-grey-lightest border-grey-light border-r">
        <menu class="p-0 mt-0">
            {% for section in site.data.menu %}
            <h2 class="cli-prefixed text-xs leading-loose tracking-wide text-grey-darker font-bold uppercase">{{
                section[0] }}</h2>
            <ul class="list-reset mb-8">
                {% for link in section[1] %}
                <li>
                    <a class="leading-loose text-md {% if page.url == link[1] %}text-red{% else %}text-grey-darker{% endif %}"
                       href="{{ link[1] }}">{{ link[0] }}</a>
                </li>
                {% endfor %}
            </ul>
            {% endfor %}
        </menu>
    </nav>
    <div id="main-article" class="flex-grow lg:block">
        <article class="max-w-3xl mx-auto px-5 py-5">
            <div class="border-b border-grey-lighter py-3 mb-3 hidden sm:block">
                {% include prev-next.html %}
            </div>

            {% unless page.hide_title %}
            <h1 class="mb-4">{% if page.alternate_title %}{{ page.alternate_title }}{% else %}{{ page.title }}{% endif %}</h1>
            {% endunless %}
            {{ content }}
            <div class="border-t border-grey-lighter py-3 mb-3 bg-white">
                {% include prev-next.html %}
            </div>
        </article>
    </div>
</main>
{% include compact-footer.html %}
<script src="/static/prism.js" type="application/javascript"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript"> docsearch({
    apiKey: '439460ae4715ee79780b36ea5647db26',
    indexName: 'eventsauce',
    inputSelector: '#global-search',
    debug: {% if site.data.dev.dev_mode %}true{% else %}false{% endif %}
});
</script>
<script src="{{ site.data.manifest['docs.js'] }}"></script>
</body>
</html>
